<template>
<div class="index-main">
	<div class="bar">
		<span class="label">对局玩家</span>
		<div class="combox" @click="fold = !fold">
			<div class="curr">
				<input class="name-input" spellcheck="false" v-model="name" placeholder="输入或者选择"/>
				<img class="fold-icon" :src="foldIcon" >
			</div>
			<transition name="combox-slide">
				<div class="list" v-if="!fold">
					<div class="item" v-for="item in userList"
					@click="name = item">
						<span>{{item}}</span>
					</div>
				</div>
			</transition>
		</div>
		<div class="confirm-btn" @click="writeDown">记下</div>
	</div>
	<div class="tip-wrap">
		<marquee direction="right">{{msg}}</marquee>
	</div>
	<div class="list-wrap">
		<div class="header" >
			<div>昵称</div>
			<div>上次对局时间</div>
			<div></div>
		</div>
		<div class="content">
			<div class="item" v-for="(item, index) in noteList">
				<div>{{item.name}}</div>
				<div>{{item.time}}</div>
				<div>
					<div class="del-btn" @click="delPlayer(index)">擦除</div>
				</div>
			</div>
		</div>
	</div>
	<div class="bottom">
		<div class="note-num">已经记下了 <span>{{noteList.length}}个</span> 傻比</div>
	</div>
</div>
</template>

<script>
let fs = require('fs')
import { ipcRenderer } from 'electron'

export default {
	data () {
		return {
			time: '',
			fold: true,
			userList: ['电竞钢琴家被多喷', '电竞钢琴家摸扎透'],
			// 需要记下的昵称
			name: '',
			noteList: [],
			msg: ''
		}
	},
	created () {
		this.getNote()
		this.getCurrPlayers()
	},
	computed: {
		foldIcon () {
			return this.fold ? require('../assets/down.png') : require('../assets/up.png')
		}
	},
	methods: {
		// 启动定时器检查是否对局更新
		initGameTimer () {
			setInterval(() => {
				let path = this.$main.path + '\\Game\\Logs\\GameLogs'
				fs.readdir(path, (err, files) => {
					if (files.length != 0) {
						let name = files[files.length - 1]
						if (name != this.$main.last) {
							this.getCurrPlayers()
						}
					}
				})
			}, 5000)
		},
		// 获取最新对局日志中游戏玩家
		getCurrPlayers () {
			let path = this.$main.path + '\\Game\\Logs\\GameLogs'
			fs.readdir(path, (err, files) => {
				if (err) {
					return this.$main.showMsg('目录好像不怎么对，重新设置下吧', () => {
						this.$main.path = ''
						this.$main.pathExist = false
						fs.unlink("config.dll", err => {})
					})
				}
				if (files.length != 0) {
					let name = files[files.length - 1]
					path = path + `\\${name}\\${name + '_r3dlog.txt'}`
					readLogFile(path, name)
				}
			})
			let that = this
			function readLogFile (path, name) {
				fs.readFile(path, 'utf-8', (err, data) => {
					if (err) {
						return that.$main.showMsg('读取最新对局消息失败')
					}
					if (data.indexOf("Game Server Connection Established") == -1) {
						return setTimeout(() => {readLogFile (path, name)}, 1000) 
					}
					let needShowDialogTip = name != that.$main.last  
					that.$main.last = name
					that.$main.writeConfig()
					that.time = name.split('T')[0] + ' ' + name.split('T')[1].replaceAll('-', ':')
					let users = []
					data = data.substring(data.indexOf("CONNECTION READY"))
					data = data.split('ALWAYS')
					for (let item of data) {
						if (item.indexOf("TeamOrder") != -1 || item.indexOf("TeamChaos") != -1) {
							item = item.substring(item.indexOf(')') + 2)
							item = item.substring(0, item.indexOf(' '))
							item = item.replaceAll("'","")
							users.push(item)
						} else {
							break;
						}
					}
					that.userList = users
					that.showTip(needShowDialogTip)
					that.initGameTimer()
				})
			}
		},
		// 获取小本本信息
		getNote () {
			fs.readFile('note.dll', 'utf-8', (err, data) => {
				if (err) {
					return
				}
				data = data.split('\n')
				for (let item of data) {
					let value = item.split("____")
					this.noteList.push({
						name: value[0],
						time: value[1]
					})
				}
			})
		},
		// 记下小本本
		writeDown () {
			if (!this.name.trim()) {
				return this.$main.showMsg("要记谁总得写个名字吧")
			} 
			
			for (let item of this.noteList) {
				if (this.name == item.name) {
					return this.$main.showMsg('已经记过了')
				}
			}
			
			this.noteList.push({
				name: this.name,
				time: this.time
			})
			let data = ''
			for (let item of this.noteList) {
				data = data + item.name + '____' + item.time + '\n'
			}
			data = data.trim()
			fs.writeFile('note.dll', data, err => {
				if (err) {
					return this.$main.showMsg('记下小本本失败，为啥问魏家洛吧')
				}
			})
		},
		// 小本本玩家遭遇提示
		showTip (showDialog) {
			if (this.noteList.length == 0) {
				return
			}
			this.msg = ''
			let noteName = ''
			for (let item of this.noteList) {
				if (this.userList.includes(item.name)) {
					noteName = noteName + ',' + item.name
				}
			}
			noteName = noteName.substring(1)
			
			if (noteName == '') {
				return
			}
			this.msg = `干!又遇到了 ${noteName}`
			if (showDialog) {
				ipcRenderer.send('show-msg', {
					message: this.msg,
					title: '恶心或者，冲烂他们'
				})
			}
		},
		// 从小本本擦除玩家
		delPlayer (index) {
			this.noteList.splice(index, 1)
			let data = ''
			for (let item of this.noteList) {
				data = data + item.name + '____' + item.time + '\n'
			}
			data = data.trim()
			fs.writeFile('note.dll', data, err => {
				if (err) {
					return this.$main.showMsg('记下小本本失败，为啥问魏家洛吧')
				}
			})
		}
	}
}
</script>

<style lang="less">
.index-main{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	padding: 20px;
	
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		transition: all .2s;
		
		&:hover{
			cursor: pointer;
		}
		
		&:active{
			opacity: 0.6;
		}
	}
	
	.bar{
		position: relative;
		display: flex;
		align-items: center;
		
		.label{
			font-weight: bold;
		}
		
		.combox{
			position: relative;
			width: 400px;
			margin-left: 10px;
			border-radius: 2px;
			border: 2px solid #000000;
			
			&:hover{
				cursor: pointer;
			}
			
			.curr{
				position: relative;
				z-index: 20;
				width: 100%;
				height: 28px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				
				.name-input{
					outline: none;
					border: none;
					width: calc(100% - 80px);
					height: 100%;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
				
				.fold-icon{
					position: absolute;
					width: 15px;
					right: 5px;
				}
			}
			
			.list{
				background: #FFFFFF;
				z-index: 10;
				transition: all .2s;
				border: 2px solid #000000;
				border-radius: 0 0 2px 2px;
				position: absolute;
				width: 400px;
				top: 28px;
				left: -2px;
				
				.item{
					width: 100%;
					height: 28px;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all .2s;
					
					>span{
						width: 380px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						text-align: center;
					}
					
					&:hover{
						background: #eeeeee;
					}
				}
			}
		}
		
		.confirm-btn{
			.btn();
			position: absolute;
			right: 0;
			width: 70px;
			height: 30px;
			background: #000000;
			color: #FFFFFF;
		}
	}
	
	.tip-wrap{
		margin-top: 10px;
		font-size: 14px;
		color: #FF0000;
		font-weight: bold;
	}
	
	.list-wrap{
		min-height: 0;
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		flex: 1;
		border: 1px solid #000000;
		border-radius: 2px;
		padding: 0 10px 10px;
		
		.header, .item{
			display: flex;
			align-items: center;
			font-size: 14px;
			padding: 10px 0;
			
			>div{
				display: flex;
				align-items: center;
				justify-content: center;
				
				&:nth-child(1) {
					flex: 1
				}
				
				&:nth-child(2) {
					width: 200px;
				}
				
				&:nth-child(3) {
					width: 100px;
				}
			}
		}
		
		.header{
			font-weight: bold;
		}
		
		.content{
			flex: 1;
			overflow-y: auto;
			
			.item{
				transition: background .2s;
				
				&:hover{
					background: #eeeeee;
					
				}
				
				&:hover >div:nth-child(1) {
					font-weight: bold;
				}
				
				.del-btn{
					.btn();
					font-size: 12px;
					background: #999999;
					color: #FFFFFF;
					width: 40px;
					height: 25px;
				}
			}
			
		}
	}
	
	.bottom{
		position: relative;
		display: flex;
		align-items: center;
		height: 40px;
		
		.note-num{
			position: absolute;
			font-size: 12px;
			right: 0;
			
			>span{
				font-weight: bold;
			}
		}
	}
	
	.combox-slide-enter-from, .combox-slide-leave-to{
		transform: translateY(-28px);
		opacity: 0;
	}
	
	.combox-slide-enter-to, .combox-slide-leave-from{
		transform: translateY(0px);
		opacity: 1;
	}
}
::-webkit-scrollbar {
	width: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
	-webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background: #000000;
}
</style>
